import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import axios from "axios";
// 在vuex中引入了axios

export default new Vuex.Store({
  state: {
    msg: "这是vuex里的一个公共数据msg",
    // list: [
    //   { title: "任务1", status: 0 },
    //   { title: "任务2", status: 1 },
    //   { title: "任务3", status: 0 },
    //   { title: "任务4", status: 1 },
    // ],
    list: [],
  },
  //state是存放公共数据的地方
  mutations: {
    setlist(state, val) {
      state.list = val;
    },
    //存数据
    add(state, title) {
      state.list.push({ title: title, status: 0 });
    },
    //mutation的第一个参数永远是state，操作list，往里添加一条数据
    //只有mutation有权利操作state
  },
  actions: {
    getlist(context) {
      axios.get("list.json").then((res) => {
        context.commit("setlist", res.data.list);
        //action没有权利修改state 还得调用mutation修改
      });
    },
    //actions 的默认参数是context（是上下文的意思）代表vuex的实例
  },
  modules: {},
  getters: {
    num1(state) {
      let arr = state.list.filter((item) => {
        return item.status == 0;
      });
      return [arr.length, state.list.length - arr.length];
      // return { a: arr.length, b: state.list.length - arr.length };
    },
    // num2(state) {
    //   let arr = state.list.filter((item) => {
    //     return item.status == 1;
    //   });
    //   return arr.length;
    // },
  },
});
